<template>
    <div>
        <h1>排房信息</h1>
        <table class="table table-bordered">
            <tr>
                <td>房型</td>
                <td>房号</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.hao }}</td>
                <td>
                    <input type="button" value="删除" @click="shan(item.id)">
                </td>
            </tr>
        </table>
    </div>
    <span>总共{{ data.totalCount }}条</span>
    <span>总共{{ data.totaPage }}页</span>
    <span>
        当前{{ quinfo.pageindex }} / {{ data.totaPage }}
    </span>
    <input type="button" value="首页" @click="gitlist(1)">
    <input type="button" value="上一页" @click="gitlist(quinfo.pageindex-1)">
    <select v-model="quinfo.pageSize" @change="show">
        <option :value="item" v-for="item in arr" :key="item">
          每页显示{{ item }}条
        </option>
      </select>
    <input type="button" value="下一页" @click="gitlist(quinfo.pageindex+1)">
    <input type="button" value="尾页" @click="gitlist(data.totaPage)">
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import {useRoute,useRouter} from 'vue-router'
import axios from 'axios'
import 'bootstrap/dist/css/bootstrap-theme.css'
let route=useRoute();
let router=useRouter();
const add=()=>{
    router.push("/fangadd")
}
let checked = ref(false);
let quinfo=reactive({
      "name": "",
      "hao": 0,
      "bie": "",
      "state": 0,
      pageindex:1,
      pageSize:2
})
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0
})
onMounted(()=>{
    show();
})
let arr = ref([2, 4, 6, 8]);
const show=()=>{
    axios({
        url:'https://localhost:7098/api/FangHao/GetFangHaos',
        method:'get',
        params:quinfo
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totalCount=res.data.totalCount;
        data.totaPage=res.data.totaPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}

const upd=(id:any)=>{
    router.push({
        path: '/fanUpd', 
        query: {
      id: id,
    },
    })
  
};
const gitlist=(num:any)=>{
    if (num < 1) {
    quinfo.pageindex = 1;
    return;
  }
  if (num > data.totapage) {
    quinfo.pageindex = data.totapage;
    return;
  }
  quinfo.pageindex = num;
  show();
}
const shan=(id:any)=>{
    var f=confirm("确认要删除吗?");
    axios({
        url:'https://localhost:7098/api/FangHao/ShanFHao',
        method:'delete',
        params:
        {id:id}
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("删除成功!");
            show();
        }
        else{
            alert("删除失败!");
        }
    })
    .catch((err)=>{
        console.log(err);
    })

}
</script>

<style scoped>

</style>